<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Hello - Adele - 单曲 - 网易云音乐</title>
    <link rel="shortcut icon" href="../static/favicon.ico" type="image/x-icon">
    <script src="/js/jquery-3.4.1.min.js"></script>
<!--    <script-->
<!--            src="https://code.jquery.com/jquery-3.4.1.js"-->
<!--            integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="-->
<!--            crossorigin="anonymous"></script>-->
</head>
<body>
<h1>评论</h1>
<form action="/comment/post" method="post">
    <input type="hidden" name="nickName" value="bmatch"/>
    <input type="hidden" name="songId" value="35847388"/>
    <input type="text" name="content" style="width: 80%;height: 100px;" placeholder="填写你的评论"/>
    <br/>
    <button type="submit">评论</button>
</form>
<h3>精彩评论</h3>
<ul th:each="comment:${comments}">
    <li>
        <img th:src="${comment.icon}" alt=""/>
        <span th:text="${comment.nickName}"></span>
        <span th:text="${comment.content}"></span>
    </li>
    <li>
        <label>评论时间：</label>
        <span th:text="${#dates.format(comment.commentTime,'yyyy-MM-dd HH:mm:ss')}"></span>
        <label>点赞数：</label>
        <a href="#" th:data-id="${comment.id}" class="like-btn"><span th:text="${comment.likeNum}"></span></a>
    </li>
</ul>
<script>
    $(function () {
        $(".like-btn").on('click',function (e) {
            e.preventDefault();
            var self = $(this);
            var commentId = self.data('id');
            $.ajax({
                url:"/comment/like",
                method:"POST",
                data:{
                    songId:"35847388",
                    commentId:commentId
                },
                cache:false
            })
                .done(function (data) {
                    self.html(data.likeNum);
                });
        });
});
</script>
</body>
</html>